<!-- 我的发布列表 -->
<template>
  <div class="about_wrapper">
    <ul class="list_con">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadData">
        <div v-if="ReleaseData.length > 0">
          <li class="list_every" v-for="(v,i) in ReleaseData" :key="i" @click="PostDetail(v)">
            <p class="fbCon">
              <span>#{{v.adviseType}}#</span>
              <span>{{v.adviseName}}</span>
            </p>
            <div class="fbImg" :style="'background-image: url('+ picUrl(v.url.split(',')[0]) +')'">
              <img :src="v.acceptanceStage === '0' ? require('@/assets/my/ybj.png') : (v.acceptanceStage === '1'? require('@/assets/my/clz.png'):require('@/assets/my/wsl.png'))" alt />
              <!-- <img src="@/assets/my/clz.png" alt="">
              <img src="@/assets/my/wsl.png" alt="">-->
            </div>
            <div class="noticexx">
              <div>
                <img src="@/assets/my/dingwei.png" alt />
                {{v.adress}}
              </div>
              <div>{{v.createTime}}</div>
            </div>
            <van-divider />
            <div class="huifu" v-if="v.acceptanceOpinion">
              <div>
                <img src="@/assets/my/huifu.png" alt />已答复
              </div>
            </div>
            <div style="height:20px;background:#f7f7f7;margin:15px 0;"></div>
          </li>
        </div>
        <div class="noDatas" v-else>
          <img src="@/assets/my/kkk.png" alt />
        </div>
      </van-list>
    </ul>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      ReleaseData: [],
      pageIndex: 1,
      pageSize: 8,
      totalCount: 0,
      loading: false,
      finished: false
    };
  },
  //方法集合
  methods: {
    loadData() {
      // 异步更新数据
      setTimeout(() => {
        this.loading = true;
        this.PublishData();
        this.loading = false;
        if (this.ReleaseData.length >= this.totalCount) {
          this.finished = true;
        }
      }, 1000);
    },
    // 加载发布数据
    PublishData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      this.post("/public_opinion/loadInfo", {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        wxId: this.slow.userInfo.openId
        // wxId:'o9g_ywafeOGzxbOQ_IQ7HXKOSDIM',
      }).then(r => {
        this.$toast.clear();
        // this.ReleaseData = r.list;
        this.ReleaseData = this.ReleaseData.concat(r.list);
        // alert("rest"+JSON.stringify(r.list))
        this.totalCount = r.pageInfo.totalCount;
        this.pageIndex += 1;
      });
    },
    PostDetail(v) {
      this.$router.push({
        path: "/myKnockOutxq",
        query: {
          Datas: v
        }
      });
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.list_con {
  padding: 0 8vw;
  .list_every {
    .fbCon {
      span:nth-child(1) {
        color: #0094f8;
        margin-right: 10px;
      }
    }
    .fbImg {
      position: relative;
      margin-top: 15px;
      height: 45vw; // background: pink;
      background-repeat: no-repeat;
      background-size: cover;
      img {
        position: absolute;
        right: 0;
        top: -30px;
        display: block;
        width: 100px;
      }
    }
    .huifu {
      display: flex;
      justify-content: center;
      color: #1a9df0;
      img {
        width: 20px;
        height: 20px;
        vertical-align: bottom;
        display: inline-block;
        margin-right: 10px;
      }
    }
    .noticexx {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      div:nth-child(1) {
        width: 40vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        img {
          height: 24px;
          width: 24px;
          vertical-align: bottom;
        }
      }
      div:nth-child(2) {
        color: #aeaeae;
      }
    }
  }
  .noDatas {
    position: absolute;
    top: 0px;
    bottom: 0;
    width: 84vw;
    display: flex;
    justify-content: center;
    img {
      display: block;
      width: 50vw;
      height: 50vw;
      margin-top: 40vw;
    }
  }
}
</style>